import { h, Component } from 'preact';
import Tab from '../../components/tab';
import AboutMeStore from './AboutMeStore.js';


class AboutMe extends Component {

	constructor(p){
		super(p);
		this.aboutMeStore = new AboutMeStore();
		this.state ={
			descrs: []
		};
	}

	componentDidMount(){
		this.setState({ descrs: this.aboutMeStore.getDescrs() });
	}

	render(props, state) {
		return (
			<article>
				{/* <div className="photowall">
					<ul className="wall_a">
						<li><a href="/about/wall/2018-08-04/61.html" target="_blank">
							<img src="/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" />
							<figcaption>
								<h2>个人博客，属于我的小世界！</h2>
							</figcaption>
						</a></li>
						<li>
							<p className="text_b"><a href="/about/wall/2018-08-04/59.html" target="_blank">我是怎么评价自己的？</a></p>
						</li>
						<li><a href="/about/wall/2018-08-04/62.html" target="_blank"><img src="/d/file/news/life/2018-06-29/75842f4d1e18d692a66c38eb172a40ab.jpg" />
							<figcaption>
								<h2>作为一个设计师,如果遭到质疑你是否能恪守自己的原则?</h2>
							</figcaption>
						</a></li>
						<li>
							<p className="text_b"><a href="/about/wall/2018-08-04/60.html" target="_blank">安静地做一个爱设计的女子</a></p>
						</li>
						<li>
							<p className="text_b"><a href="/about/wall/2018-08-04/64.html" target="_blank">云南之行——初到昆明滇池半日游</a></p>
						</li>
						<li><a href="/about/wall/2018-08-04/63.html" target="_blank"><img src="/d/file/news/s/2013-11-25/6abfdd1f080561acedbd2606210951eb.png" />
							<figcaption>
								<h2>某一人似曾相识、某一刻似曾经历</h2>
							</figcaption>
						</a></li>
						<li>
							<p className="text_b"><a href="/about/wall/2018-08-04/65.html" target="_blank">再看4年前某婚恋网站我的十条征婚条件</a></p>
						</li>
						<li><a href="/about/wall/2018-08-04/66.html" target="_blank"><img src="/d/file/news/s/2013-11-22/5fafd3ebc31c323311092c440bcf41bf.jpg" />
							<figcaption>
								<h2>抄袭门过后——丢掉心结，重拾自己</h2>
							</figcaption>
						</a></li>
					</ul>
				</div> */}
				<div className="abox">
					<h2>博主介绍</h2>
					<div className="biji-content" id="content">
						<span>
							<strong>温南南</strong>，
								15年实习，16毕业之前一直做全栈开发工程师并且经历过好几个项目， 后台17年底到现在致力于前后台新技术以及架构研究。<br />
							<strong>前端 </strong>基于React+antDesignUI 进行封装，以及新业务组件的封装和完善。极大的提高团队的开发效率，以及降低新人对React学习成本。
							此外熟悉前端React最佳实践以及性能优化。能够很好的通过前端工具定位到性能瓶颈，从而能更好的进行性能优化。<br />
							<strong>后台 </strong>基于SpringCloud全家桶构建微服务架构。实现把以前复杂的报账系统分割开来。业务系统细化，降低业务难度，提高开发效率。
							对于开发工具和脚手架进行封装，代码生成模版配置，Swagger集成，以及第三方系统集成等，此外对系统基础功能和建权功能的实现... <br />
							<strong>devops </strong>
								熟悉jenkins，并且可以实现前后台代码自动构建发布。熟悉docker镜像，测试环境中通过jenkins或者maven命令将镜像传入到私服harbor，然后执行docker命令下载运行～，
								另外自己也研究过k8s...
							<strong>其他：</strong>
							git,linux....
						</span>
						{/* <a href="javascript:void(0)">...展开</a> */}
					</div>
					<h2>网站介绍</h2>
					<div className="biji-content">
						<strong>前端技术：</strong> preact、bootstrap、scss、awesome、webpack <br />
						<strong>后台技术：</strong> springboot、mybatis、mybatis-plus<br />
						<strong>部署：</strong> 腾讯云、linux、nginx<br />
						<strong>工具：</strong> idea、jrebel、vscode<br />
						<strong>数据库：</strong> mariadb <br />
					</div>

					<h2>其他</h2>
					<Tab defaultActive="1" style={{marginTop:0}} >
						{state.descrs.map(({ desc,...other }) => <Tab.Panel key={other.tab} {...other}>{desc}</Tab.Panel>)}
					</Tab>
				</div>
			
			</article>
		);
	}
}

AboutMe.propTypes = {

};

export default AboutMe;
